<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增租户')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
    <style type="text/css">.user-info-head{position:relative;display:inline-block;}.user-info-head:hover:after{content:'\f030';position:absolute;left:0;right:0;top:0;bottom:0;color:#eee;background:rgba(0,0,0,0.5);font-family:FontAwesome;font-size:24px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;line-height:110px;border-radius:50%;}</style>
</head>
<body>
<div class="main-content">
    <form id="form-tenant-add" class="form-horizontal">
        <h4 class="form-header h4">租户信息</h4>
        <div class="text-center">
            <div class="form-group">
                <label class="font-noraml">默认logo</label>
                <br/>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                        <img th:src="@{/yubb.png}">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">上传logo</span>
                            <span class="fileinput-exists">更改</span>
                            <input type="file" id="logoUpload" accept="image/jpg,image/jpeg,image/png,image/PNG">
                        </span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                    <input type="hidden" id="logoUrl" autocomplete="off" required name="logoUrl" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">租户名称：</label>
                    <div class="col-sm-8">
                        <input name="tenantName" placeholder="请输入租户名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">租户编号：</label>
                    <div class="col-sm-8">
                        <input id="tenantNo" name="tenantNo" placeholder="请输入租户编号" class="form-control" type="text" minlength="10" maxlength="32" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">系统开放时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group select-time">
                            <input type="text" class="time-input form-control" style="width: 40%;" id="startTime" placeholder="请选择系统运行日" name="startDate" required/>
                            <input type="text" class="time-input form-control" style="width: 40%;margin-left: 8%" id="endTime" placeholder="请选择系统到期日" name="endDate" required/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">租户状态：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="status" checked>
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">租户超管信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">用户昵称：</label>
                    <div class="col-sm-8">
                        <input name="userName" placeholder="请输入用户昵称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">顶级部门名称：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="deptName" placeholder="请输入顶级部门名称" class="form-control" type="text" maxlength="32" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">登录账号：</label>
                    <div class="col-sm-8">
                        <input id="loginName" name="loginName" placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">登录密码：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="password" name="password" placeholder="请输入登录密码" class="form-control" type="password" th:value="${@config.getKey('sys.user.initPassword')}" required>
                            <span class="input-group-addon" title="登录密码,鼠标按下显示密码"
                                  onmousedown="$('#password').attr('type','text')"
                                  onmouseup="$('#password').attr('type','password')"><i class="fa fa-key"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">手机号码：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
                            <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">邮箱：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="email" name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">用户性别：</label>
                    <div class="col-sm-8">
                        <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">用户状态：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="userStatus" checked>
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">备注：</label>
                    <div class="col-xs-10">
                        <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script>
    var prefix = ctx + "platform/tenant";

    $("#form-tenant-add").validate({
        onkeyup: false,
        rules:{
            tenantNo:{
                minlength: 10,
                maxlength: 32,
                remote: {
                    url: prefix + "/checkTenantNoUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "tenantNo": function() {
                            return $.common.trim($("#tenantNo").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            password:{
                minlength: 5,
                maxlength: 20
            },
            tenantName:{
                minlength: 5,
                maxlength: 30
            },
            email:{
                email:true,
                remote: {
                    url: ctx + "system/user/checkEmailUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "email": function () {
                            return $.common.trim($("#email").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            phonenumber:{
                isPhone:true,
                remote: {
                    url: ctx + "system/user/checkPhoneUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "phonenumber": function () {
                            return $.common.trim($("#phonenumber").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
        },
        messages: {
            "tenantNo": {
                remote: "租户编号已经存在"
            },
            "email": {
                remote: "Email已经存在"
            },
            "phonenumber":{
                remote: "手机号码已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        var chrtype = [[${#strings.defaultString(@config.getKey('sys.account.chrtype'), 0)}]];
        var password = $("#password").val();
        if ($.validate.form() && checkpwd(chrtype, password)) {
            var data = $("#form-tenant-add").serializeArray();
            var status = $("input[id='status']").is(':checked') == true ? 0 : 1;    //租户状态
            var userStatus = $("input[id='userStatus']").is(':checked') == true ? 0 : 1;   //用户状态
            data.push({"name": "status", "value": status});
            data.push({"name": "userStatus", "value": userStatus});
            $.operate.saveTab(prefix + "/add", data);
        }
    }

    $(function() {
        logoUpload();
    });

    //租户logo图片上传
    function logoUpload(){
        $('#logoUpload').on('change.bs.fileinput ', function (e) {
            var file = document.getElementById('logoUpload').files[0];
            if(file == null){
                return;
            }
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        $("#logoUrl").val(result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function (error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        });
    }
</script>
</body>
</html>